<template>
  <div class="aiLoading-container" style="height: 100%">
      <div style="width: 500px;margin: 0 auto;">
        <img src="@/assets/logo/logo1.png" class="logo" alt="Logo" />
        <div class="title">人云联拓·医疗大模型</div>
        <div class="subtitle">正在出具优化建议</div>
        <div class="progress-container">
          <el-progress :percentage="40" :show-text="false" :stroke-width="10" :color="['#00968F', '#00968F', '#00968F']"      style="margin: 20px 0 10px 0;"/>
        </div>
        <div class="flex justify-content-space-between" style="width: 500px;margin: 0 auto;font-size: 14px;color: #666666">
          <div>分析数据</div>
          <div>生成方案</div>
          <div>优化建议</div>
          <div>完成</div>
        </div>
        <div class="info flex align-center justify-content-center" style="margin-top: 60px;color: #666666">
          <img src="@/assets/static/infos.png" style="width: 20px;height: 20px;margin-right: 10px"  alt="Logo" />
          <div>请稍候，系统正在分析您的数据并生成个性化优化建议</div>
        </div>

        <div class="spinner">
          <div class="bounce1"></div>
          <div class="bounce2"></div>
          <div class="bounce3"></div>
        </div>
        <div class="footer-text" style="margin-top: 20px;color: #666666;font-size: 14px">此过程通常需要 15-30 秒，具体时间取决于数据量大小</div>
      </div>
  </div>
</template>
<script setup>
</script>
<style scoped lang="scss">
.aiLoading-container{
  text-align: center;
   .logo{
        display: block;
        width: 160px;
        height: 160px;
        margin: 0 auto;
   }
   .title{
      font-size: 32px;
      font-weight: bolder;
      color: #333333;
      margin-top: 30px;
  }
   .subtitle{
    font-size: 18px;
    color: #666666;
    margin-top: 10px;
   }
  .spinner {
    margin: 20px auto;
    width: 70px;
    text-align: center;
  }

  .spinner > div {
    width: 14px;
    height: 14px;
    background-color: #00968F;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  }
  .spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
  }
  .spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
  }
  @-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
  }
  @keyframes sk-bouncedelay {
    0%, 80%, 100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    } 40% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
      }
  }
}
</style>
